// 实现一个插件化的全局懒加载指令
// 这里用到VueUse  https://vueuse.org/core/useintersectionobserver/#usage

// 1. 实现一个空的插件
// 2. 实现一个空的指令
// 3. 实现懒加载的逻辑

// 插件 定义 -> 注册
// createApp() -> app -> app.use(directivePlugin[插件])
// 重要机制:当执行use注册插件的时候相当于自动执行了插件你内部的install方法并且传入一个app实参
import { useIntersectionObserver } from '@vueuse/core'
export const directivePlugin = {
  install (app) {
    // 实现插件的逻辑 app实例对象能力范围内 都可以定义成插件
    // console.log('app实参为:', app)
    // app.directive -> 指令注册的
    app.directive('imgLazy', {
      // inserted -> mounted
      // 在指令绑定的元素首次挂载渲染完毕自动执行
      mounted (el, binding) {
        // el: 指令绑定的dom元素
        // binding.value: 指令等于号后面表达式的值
        // console.log(el, binding.value)
        // 图片懒加载核心逻辑: 只有图片进入到视口区域才正式发送图片的网络请求
        // 1. 如何判断图片的可见性？vueUse
        // 2. 如何控制图片的请求发送？img.src = url 浏览器会自动发送网络请求获取图片资源
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // console.log(isIntersecting)
            if (isIntersecting) {
              // 图片可见了 发送图片请求
              el.src = binding.value
              // 优化:如果图片已经加载完毕 不要重复监听了
              stop()
            }
          }
        )
      }
    })
  }
}
